<template>
  <div>
    <!-- 第一题 -->
    <form id="jobOne">
      <table>
        <caption>
          欢迎光~~~临 vue 开发小店
        </caption>
        <th>M9刺刀1999￥/把，折扣《8折》</th>
        <tbody>
          <tr>
            请输入你要购入的数量/把<input
              type="text"
              placeholder="输入把数"
              v-model="order"
            />
          </tr>
          <tr>
            <button @click.prevent="payDay">结账买单→</button>
          </tr>
          <tr>
            结账单：总价<i>{{ order * 1999 }}</i
            >￥元，折后价：<i>{{ order * 1999 * 0.8 }}</i
            >￥元，省了：<i>{{ order * 1999 * 0.2 }}</i
            >￥元。
          </tr>
        </tbody>
      </table>
    </form>
    <br />
    <!-- 第二题 ：选择喜欢的-->
    <form id="jobTwo">
      <h4>请选择你喜欢的专栏<i>plz choose the column u like</i></h4>
      <div v-for="item in fcolumn" :key="item">
        {{ item }}
        <input type="checkbox" v-model="tcolumn" :value="item" />
      </div>
      <ul>
        <li v-for="item in tcolumn" :key="item">{{ item }}</li>
      </ul>
    </form>
    <br />
    <!-- 第三题：购物车 -->
    <div id="jobThree">
      <table class="tb">
        <tr>
          <th>编号</th>
          <th>品牌名称</th>
          <th>创立时间</th>
          <th>操作</th>
        </tr>
        <!-- 循环渲染的元素tr -->
        <tr v-for="item in carlist" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.time }}</td>
          <td>
            <button @click="cardel(item.id)">删除</button>
          </td>
        </tr>
        <tr v-show="run">
          <td colspan="4">没有数据咯~</td>
        </tr>
      </table>
    </div>
    <br />
    <!-- 第四题：点名系统 -->
    <div id="jobFour">
      <h2>随机点名</h2>
      <div class="box">
        <span>名字是：</span>
        <div class="qs">{{ stdname || "随机点名" }}</div>
      </div>
      <div class="btns">
        <button class="start" @click="namechange">开始</button>
        <button class="end" @click="namechangestop">结束</button>
      </div>
    </div>
    <br />
    <!-- 第五题：协议倒计时 -->
    <div v-show="textrun">
      <textarea name="" id="" cols="30" rows="10">
        用户注册协议
        欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
        【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
    </textarea
      >
      <br />
      <!-- 属性不给值, 默认就是true值 -->
      <button class="btn" v-bind:disabled="textdis" @click="textclose">
        我已经阅读用户协议{{ textnum1 }}
      </button>
    </div>
    <br />
    <!-- 第六题：加加减减 -->
    <div id="jobSix">
      <ul>
        <li v-for="(item, index) in addmins" :key="item">
          <span>{{ item }}</span>
          <button @click="mathdel(index)">删除</button>
        </li>
      </ul>
      <button @click="mathnum">生成</button>
    </div>
    <br />
    <!-- 第七题：帅哥美女走一走 -->
    <div id="jobSeven">
      <ul>
        <li v-for="item in nicknamearr" :key="item">{{ item }}</li>
      </ul>
      <button @click="nicknamechange">走一走</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "FruitStoreApp",

  data() {
    return {
      // 第一题
      order: "0",
      // 第二题
      fcolumn: [
        "科幻 science fiction",
        "喜剧 comedy",
        "动漫 cartoon",
        "冒险 adventure",
        "科技 science and technology",
        "军事 military",
        "娱乐 entertainment",
        "奇闻 anecdote",
      ],
      tcolumn: [],
      // 第三题
      carlist: [
        { id: 101, name: "奔驰", time: "2020-08-01" },
        { id: 201, name: "宝马", time: "2020-08-02" },
        { id: 131, name: "奥迪", time: "2020-08-03" },
      ],
      run: false,
      // 第四题
      studentlist: [
        "梵蒂冈",
        "电视柜",
        "郭文贵",
        "艾格",
        "国开行",
        "大咖",
        "奥菲",
        "阿乐",
        "鹏哥",
      ],
      stdname: "",
      nametime: "",
      // 第五题
      textnum: 5,
      textnum1: "",
      texttime: "",
      textdis: true,
      textrun: true,
      // 第六题
      addmins: [1, 3, 5],
      addminid: 0,
      // 第七题
      nicknamearr: ["帅哥", "美女", "程序员"],
    };
  },

  mounted() {
    // mounted函数（它是页面创建后会自动触发的函数）
    // 第五题
    this.texttime = setInterval(() => {
      this.textnum1 = "(" + this.textnum + ")";
      this.textnum--;
      if (this.textnum < 0) {
        this.textnum1 = "";
        this.textdis = false;
        clearInterval(this.texttime);
      }
    }, 1000);
  },

  methods: {
    // 第三题
    cardel(id) {
      // console.log(id);
      this.carlist.forEach((item, index, carlist) => {
        if (item.id === id) {
          this.carlist.splice(index, 1);
        }
      });
      if (this.carlist.length == 0) {
        this.run = true;
      }
    },
    // 第四题
    namechange() {
      clearInterval(this.nametime);
      this.nametime = setInterval(() => {
        let num = parseInt(Math.random() * this.studentlist.length);
        this.stdname = this.studentlist[num];
      }, 30);
    },
    namechangestop() {
      clearInterval(this.nametime);
    },
    // 第五题
    textclose() {
      this.textrun = false;
    },
    // 第六题
    mathnum() {
      this.addmins.push(parseInt(Math.random() * 100));
    },
    mathdel(indext) {
      this.addmins.forEach((item, index) => {
        if (index == indext) {
          this.addmins.splice(index, 1);
        }
      });
    },
    // 第七题
    nicknamechange() {
      this.nicknamearr.push(this.nicknamearr.shift());
    },
  },
};
</script>

<style lang="css" scoped>
table {
  border-collapse: collapse;
}
table,
tr {
  width: 100%;
  text-align: center;
  border: 1px solid #000;
}
/* jobThree */
#jobThree {
  width: 600px;
  margin: 10px auto;
}

#jobThree .tb {
  border-collapse: collapse;
}

#jobThree .tb th {
  background-color: #0094ff;
  color: white;
}

#jobThree .tb td,
#jobThree .tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}
/* jobFour */
#jobFour h2 {
  text-align: center;
}

#jobFour .box {
  width: 600px;
  margin: 50px auto;
  display: flex;
  font-size: 25px;
  line-height: 40px;
}

#jobFour .qs {
  width: 450px;
  height: 40px;
  color: red;
}

#jobFour .btns {
  text-align: center;
}

#jobFour .btns button {
  width: 120px;
  height: 35px;
  margin: 0 50px;
}
</style>